<template>
  <div class="system-add-dept-container">
    <el-drawer v-model="showWindows" title="添加系统字典" @close="onCancel">
      <el-form ref="formRef" :model="moduleResource" :rules="rules" label-width="30%" size="small" style="width: 90%">
        <el-form-item label="资源名称" prop="resourceName">
          <el-input v-model="moduleResource.resourceName" placeholder="请输入资源名称"/>
        </el-form-item>
        <el-form-item label="资源类型" prop="resourceType">
          <el-select v-model="moduleResource.resourceType" placeholder="请输入资源类型" style="width: 100%">
            <el-option :value="1" label="目录"></el-option>
            <el-option :value="2" label="菜单"></el-option>
            <el-option :value="3" label="按钮"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否通用菜单" prop="isGeneral">
          <el-switch v-model="moduleResource.isGeneral"></el-switch>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="moduleResource.path" placeholder="请输入访问路径"/>
        </el-form-item>
        <el-form-item label="组件地址" prop="component">
          <el-input v-model="moduleResource.component" placeholder="请输入组件地址"/>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <IconSelector v-model="moduleResource.icon" placeholder="请输入菜单图标" type="all"/>
        </el-form-item>
        <el-form-item label="是否必选" prop="mandatory">
          <el-switch v-model="moduleResource.mandatory"></el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="moduleResource.sort" placeholder="请输入字典排序" style="width: 100%"/>
        </el-form-item>
        <div class="el-drawer__footer">
          <el-button size="small" @click="onCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="onSubmit">添 加</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import {reactive, ref, toRefs} from 'vue';
import {addModuleResource} from '/@/api/sys/module/index';
import {ElMessage} from 'element-plus';
import IconSelector from '/@/components/iconSelector/index.vue';

export default {
  name: 'addModuleResource',
  emits: ['initModuleResourceData'],
  props: {},
  components: {
    IconSelector,
  },
  setup(props, context) {
    const formRef = ref();

    const state = reactive({
      showWindows: false,
      moduleResource: {
        moduleId: '',
        resourceName: '',
        resourceType: '',
        isGeneral: false,
        path: '',
        component: '',
        icon: '',
        parentId: '',
        mandatory: false,
        sort: 0,
      },
      rules: {
        resourceName: [{required: true, message: '资源名称不能为空', trigger: 'blur'}],
        resourceType: [{required: true, message: '资源类型不能为空', trigger: 'blur'}],
      },
    });

    //打开添加窗口
    const openWindows = (moduleId: any) => {
      state.moduleResource.moduleId = moduleId;
      state.showWindows = true;
    };

    //取消
    const onCancel = () => {
      formRef.value.resetFields();
      state.showWindows = false;
    };

    //提交
    const onSubmit = () => {
      formRef.value.validate((valid: any) => {
        if (valid) {
          addModuleResource(state.moduleResource.moduleId, state.moduleResource).then((res: any) => {
            if (res.code == 200) {
              onCancel();
              context.emit('initModuleResourceData');
            } else {
              ElMessage.error(res.message);
            }
          });
        }
      });
    };
    return {
      formRef,
      openWindows,
      onCancel,
      onSubmit,
      ...toRefs(state),
    };
  },
};
</script>
